import React, { useEffect } from "react"
import { TagIcon, TimeIcon, UserIcon } from "../Icons"
import { PopoverMultiselect } from "../PopoverMultiselect/PopoverMultiselect"
import { Button } from "../ui/button"
import { api } from "@/axios/instance"
import { TaskCardDate } from "../TaskCard/TaskCardDate"

interface Props {
  data: Task | null
}

export const CardDetails = ({ data }: Props) => {
  const [tags, setTags] = React.useState<TaskTag[]>([])
  // const dispatch = useAppDispatch()

  const onChange = (tags: TaskTag[]) => {
    setTags([...tags])
  }

  const onSaveTags = (tags: TaskTag[]) => {
    let formDataTags = new FormData();
    for (let i = 0; i < tags.length; i++) {
      formDataTags.append(`tags[${i}]`, tags[i].color);
      formDataTags.append(`tags[${i}]`, tags[i].tag);
    }
    api.post('/api/TaskBoard/task/tag/set', {
      task_id: data?.id,
      tags
    })
  }

  const cardDetailsStyles = 'flex gap-1 items-center mb-2'

  useEffect(() => {
    setTags(data?.tags)
  }, [data])

  return (
    <>
      <div className={cardDetailsStyles} >
        <TagIcon size={14} />
        <div className="flex gap-2" >
          {tags.map(tag => <span key={tag.tag}>#{tag.tag}</span>)}
          {/* {data.tags.map(tag => <span key={tag.tag}>#{tag.tag}</span>)} */}
        </div>
        <PopoverMultiselect setTags={onChange} list={tags} setTagList={setTags} onSaveTags={onSaveTags} >
          <Button className='p-1 px-2 text-slate-500' variant={'ghost'} >Добавить метку</Button>
        </PopoverMultiselect>
      </div>
      <div className={cardDetailsStyles}>
        <UserIcon size={14} />
        <Button className='p-1 px-2 text-slate-500' variant={'ghost'} >Добавить исполнителя</Button>
      </div>
      <div className={cardDetailsStyles}>
        <TimeIcon size={14} />
        <TaskCardDate taskData={data} >
          <Button className='p-1 px-2 text-slate-500' variant={'ghost'} > Добавить дату</Button>
        </TaskCardDate>
        {/* <Button className='p-1 px-2 text-slate-500' variant={'ghost'} >{data?.end_date ? format(new Date(data?.end_date || ''), 'dd MMMM', { locale: ru }) : 'Добавить дату'}</Button>
        <DatePicker setTaskDate={changeEndDate} end_date={data?.end_date} clear={changeEndDate} >
          {data?.end_date ? (
            <Button className='p-0 hover:bg-transparent hover:text-slate-300 group' variant={'ghost'} onClick={(e) => e.stopPropagation()} >
              <span className='text-xs font-medium text-[#F3654A]'>{format(new Date(data.end_date || ''), 'dd MMMM', { locale: ru })}</span>
            </Button>
          ) : <Button className='p-0 hover:bg-transparent hover:text-slate-300 group invisible' variant={'ghost'} onClick={(e) => e.stopPropagation()} >Выбрать</Button>}
        </DatePicker> */}
      </div>
    </>
  )
}